<template>
  <div>
    <table class="tableCustom">
      <thead>
        <tr>
          <td>订单商品</td>
          <td>商品金额</td>
          <td>佣金类型</td>
          <td>佣金金额</td>
          <td>佣金状态</td>
          <td>用户手机</td>
          <td>操作</td>
        </tr>
      </thead>
      <tr class="ele-tr-top">
        <td colspan="7" />
      </tr>
      <tbody v-for="(item, index) in bindTable" :key="index">
        <tr class="ele-tr-content">
          <td colspan="7" class="ele-td-first">
            <div>
              <p>
                <span class="add-number">订单编号：{{ item.orderSn }} </span>
                <span class="add-number">下单日期：{{ item.addTime }} </span>
                <span class="add-number">门店：{{ item.storeName }} </span>
                <span v-if="item.client == 'wxmini'" class="add-number">（微信小程序）</span>
                <span v-else-if="item.client == 'alimini'" class="add-number">（支付宝小程序）</span>
              </p>
              <el-button
                type="text"
                @click="routerOrderDetails(item)"
              >查看详情</el-button>
            </div>
          </td>
        </tr>
        <!-- 要循环的区域 -->
        <tr v-for="(goods, index2) in item.goodsList" :key="index2" class="for-list">
          <!-- 商品 -->
          <td>
            <div>
              <img
                :src="goods.image"
                alt=""
              >
            </div>
            <div>
              <p>{{ goods.name }}</p>
              <p v-if="goods.skuName">规格：{{ goods.skuName }}</p>
              <p v-if="goods.deviceId">设备编号：{{ goods.deviceId }}</p>
            </div>
          </td>
          <!-- 实付金额 -->
          <td class="baojia">
            <p v-if="goods.price != undefined">￥{{ parseFloat(goods.price).toFixed(2) }}</p>
            <p v-if="goods.type =='lease'" style="color: gray">设备押金</p>
            <p v-if="goods.stock != undefined" style="color: gray">×{{ goods.stock }}</p>
          </td>
          <!-- 佣金类型 -->
          <td>
            <p v-if="goods.commissionType">{{ goods.commissionType }}</p>
            <p v-else>---</p>
          </td>
          <!-- 佣金 -->
          <td>
            <p v-if="goods.commissionPrice">{{ goods.commissionPrice }}</p>
            <p v-else>---</p>
          </td>
          <!-- 状态 -->
          <td>
            <p v-if="goods.commissionStatus == 0">待结算</p>
            <p v-else-if="goods.commissionStatus == 1">已结算</p>
            <p v-else>---</p>
          </td>
          <!-- 用户 -->
          <td class="ele-td-border">
            <p v-if="item.userPhone">{{ item.userPhone }}</p>
            <p v-else>---</p>
          </td>
          <td class="ele-td-border" />
        </tr>
      </tbody>
    </table>
    <div class="pagination">
      <div />
      <div>
        <el-pagination
          :current-page="pages.pageIndex"
          :page-sizes="[15, 30, 50, 100]"
          :page-size="pages.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pages.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { extensionManagement } from '@/api/customAPI/shop/ExtensionManagement'
export default {
  name: 'Table',
  props: {
    promoterId: {
      type: [String, Number],
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    keySearch: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      key: '',
      bindTable: [],
      pages: {
        pageIndex: 1,
        pageSize: 15,
        total: 0
      }
    }
  },
  watch: {
    keySearch(newValue, oldValue) {
      this.pages.pageIndex = 1
      this.pages.total = 0
      this.inititalInfo()
    }
  },
  mounted() {
    this.inititalInfo()
  },
  methods: {
    inititalInfo() {
      const vm = this
      extensionManagement({
        promoterId: vm.promoterId,
        type: this.type,
        keySearch: this.keySearch,
        page: this.pages.pageIndex,
        limit: this.pages.pageSize
      }).then(inf => {
        console.log(inf.data.data)
        this.bindTable = inf.data.data.data
        this.pages.total = inf.data.data.total
      })
    },
    handleSizeChange(size) {
      this.pages.pageSize = size
      this.inititalInfo()
    },
    handleCurrentChange(index) {
      this.pages.pageIndex = index
      this.inititalInfo()
    },
    routerOrderDetails(row) {
      // this.$message.warning('功能未实现，请联系宗志国开发...')
      console.log(row)
      const rows = {
        suboId: row.childOrderId
      }
      this.$router.push({
        name: 'YWC',
        query: {
          p: this.$ed({
            rows: rows,
            status: 801
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tableCustom {
  width: 100%;
  border: 1px solid #f3f3f3;
  border-collapse: collapse;

  tr {
    td {
      border: 1px solid #f3f3f3;
      text-align: center;
    }
  }
  thead {
    background: #f3f3f3;
    td {
      height: 50px;
      border: none;
    }
    td:first-child {
      width: 30%;
    }
  }
  .ele-tr-top {
    height: 5px;
  }
  tbody {
    .ele-tr-content {
      background: #f3f3f3;
      .ele-td-first {
        div {
          font-size: 13px;
          display: flex;
          justify-content: space-between;
          padding: 0 10px;
          p {
            .add-number {
              color: #000000;
              font-weight: bold;
              font-size: 12px;
              margin-right: 10px;
            }
          }
        }
      }
    }
    .for-list {
      td:first-child {
        border: none;
        border-bottom: 1px solid #f3f3f3;
        padding-left: 5%;
        div {
          float: left;
        }
        div:first-child {
          width: 120px;
          height: 120px;
          padding: 15px;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        div:last-child {
          margin-top: 10px;
          font-size: 13px;
          text-align: start;
          p:nth-child(2) {
            color: gray;
          }
        }
      }
      .baojia > ul {
        height: 100%;
        padding: 0px;
        list-style-type: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        li {
          padding: 5px 0px;
        }
        .dazhe {
          width: 50%;
          display: flex;
          justify-content: space-around;
        }
        .shuliang {
          font-size: 13px;
          color: gray;
        }
      }
      .ele-td-border {
        border-top: none;
        border-bottom: none;
      }
    }
  }
}
.pagination {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  margin-bottom: 100px;
}
</style>
